<template>
  <view class="content">
	<u-navbar bgColor="rgba(0,0,0,0)" placeholder leftIcon=""></u-navbar>
	
	<!-- 登录卡片 -->
	<view class="login-card">
		<p style="font-size: 1.2rem;font-weight: bold;">旅游信息服务小程序</p>
		<div class="login-icon">
			<div class="u-login-icon">
				<image src="../static/login/login-1.svg" mode=""></image>
				<p>方便快捷</p>
			</div>
			<div class="u-login-icon">
				<image src="../static/login/login-2.svg" mode=""></image>
				<p>一键授权</p>
			</div>
			<div class="u-login-icon">
				<image src="../static/login/login-3.svg" mode=""></image>
				<p>前程无忧</p>
			</div>
		</div>
		<button style="width: 100%;background-color: #21de00;color: white;" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" @click="onChooseAvatar"> 一键授权登录 </button>
		<!-- <button style="width: 100%;">游客身份访问</button> -->
	</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getPhone } from '@/api/member.js'
import { useGlobalStore } from '@/stores/global.js'

const avatarUrl = ref('')
const userInfo = ref(null)
const globalStore = useGlobalStore()

function onChooseAvatar() {
	wx.getUserProfile({
		desc:'用于完善用户资料',
		success: (res) => {
			avatarUrl.value = res.userInfo.avatarUrl
		},
		fail: (res) => {
			console.error('获取失败:', res);
		}
	})
}


async function onGetPhoneNumber(e) {
	if (e.detail.errMsg !== 'getPhoneNumber:ok') {
		uni.showToast({ title: '用户取消授权', icon: 'none' })
		return
	}
	const {code} = await wx.login()
	const {data} = await getPhone(code,e.detail.code)
	let avatar = avatarUrl.value
	userInfo.value = {...data,avatar}
	// console.log(userInfo.value);
	globalStore.setUserInfo(data)
	console.log(globalStore.userInfo);
	wx.setStorageSync('token',data.token || null)
	uni.switchTab({ url: '/pages/index/index' })
}
</script>

<style scoped>
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120rpx;
  padding-top: 300rpx;
  
  background: linear-gradient(
	to bottom,
	#18a200 0%,
	white 80%
  );
}
.avatar-btn {
  background: none;
  border: none;
  padding: 0;
}

.login-card {
	width: 90vw;
	border-radius: 20rpx;
	background-color: white;
	
	padding: 40rpx 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30rpx;
}

.login-icon{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.u-login-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 10rpx 20rpx;
	gap: 20rpx;
}
.u-login-icon image {
	width: 100rpx;
	height: 100rpx;
}
</style>
